/**
 * 设备信息
 * author Forjune
 * @param{bool} show 是否显示表单和横线
 * @param{ref} cRef
 */
import React, { useImperativeHandle, useEffect } from 'react';
import TitleLine from 'components/common/titleLine'
import { Select, Form } from 'antd';
import noImg from 'assets/no_Img.png'

import './index.styl';

const { Option } = Select;

function DeviceMessage(props) {
  const { cRef, show, handleSelect, title, deviceInfo, deviceList, defaultVal, form, diff } = props;
  const { getFieldDecorator, validateFields, setFieldsValue } = form
  useImperativeHandle(cRef, () => ({
    validateFields
  }));
  useEffect(() => {
    if (defaultVal !== '') {
      setFieldsValue({
        device: defaultVal
      })
    }
  }, [defaultVal, setFieldsValue])
  const handleChange = (value, e) => {
    handleSelect(value, e.key);
  };

  return (
    <div className="deviceMessage">
      <TitleLine title={title}></TitleLine>
      {show ? (
        <>
          <div className="device">
            <Form.Item label="设备选择" colon={false}>
              {getFieldDecorator('device', {
                rules: [{ required: true, message: '请选择设备' }],
                validateTrigger: ['onBlur', 'onChange']
              })(
                <Select
                  placeholder="请选择或查询设备"
                  className="self-select"
                  onChange={handleChange}
                  showSearch={true}
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                >
                  {deviceList &&
                    deviceList.length > 0 &&
                    deviceList.map(item => {
                      return (
                        <Option value={item.deviceName} key={item.id}>
                          {item.deviceName}（{item.deviceNo}）
                        </Option>
                      );
                    })}
                </Select>
              )}
            </Form.Item>
            <div className="tip">
              <span>只可选择台账状态【启用】的设备</span>
            </div>
          </div>
          <div className="self-hr"></div>
        </>
      ) : null}
      {
        show || diff ?
          (
            <div className="device-detail">
              <div style={{ width: '100%', overflow: 'hidden' }}>
                <div className="device-image">
                  <img src={deviceInfo && deviceInfo.deviceImage ? deviceInfo.deviceImage : noImg} alt="" />
                  <div className="device-status">
                    <div style={{float: 'left', width: '50%'}}>
                      <span style={{ fontSize: '12px' }}>设备状态</span>
                      <span className="status-value" >{deviceInfo && deviceInfo.runStatusStr}</span>
                    </div>
                    <div style={{float: 'right', width: '50%', textAlign: 'right'}}>
                      <span style={{ fontSize: '12px' }}>台账状态</span>
                      <span className="status-value">{deviceInfo && deviceInfo.ledgerStatusStr}</span>
                    </div>
                  </div>
                </div>
                <div className="device-mes">
                  <div className="title">{deviceInfo && deviceInfo.deviceName}</div>
                  <div className="time"><span>创建日期：</span><span style={{color:'#666'}}>{deviceInfo && deviceInfo.createdTime}</span></div>
                  <div className="mes">
                    <div className="mes-item">
                      <span>设备类型</span>
                      <span>{deviceInfo && deviceInfo.deviceTypeName}</span>
                    </div>
                    <div className="mes-item">
                      <span>设备编号</span>
                      <span>{deviceInfo && deviceInfo.deviceNo}</span>
                    </div>
                    <div className="mes-item" style={{marginTop: '10px'}}>
                      <span>使用部门</span>
                      <span>{deviceInfo && deviceInfo.groupName}</span>
                    </div>
                    <div className="mes-item" style={{marginTop: '10px'}}>
                      <span>责任人</span>
                      <span>{deviceInfo && deviceInfo.chargePerson}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )
          :
          (
            <div className="device-detail-detail">
              <div style={{overflow: 'hidden'}}>
                <div style={{ fontSize: '16px', color: '#666666',width: '65%',float: 'left' }}>{deviceInfo && deviceInfo.deviceName}</div>
                <div className="time" style={{ marginTop: '0',width: '35%',float: 'left' }}><span>创建日期：</span>{deviceInfo && deviceInfo.createdTime}</div>
              </div>
              <div style={{ width: '100%', overflow: 'hidden'}}>
                <div className="device-image">
                  <img src={deviceInfo && deviceInfo.deviceImage ? deviceInfo.deviceImage : noImg} alt="" />
                  <div className="device-status">
                    <div style={{float: 'left', width: '50%'}}>
                      <span style={{ fontSize: '12px' }}>设备状态</span>
                      <span className="status-value" >{deviceInfo && deviceInfo.runStatusStr}</span>
                    </div>
                    <div style={{float: 'right', width: '50%', textAlign: 'right'}}>
                      <span style={{ fontSize: '12px' }}>台账状态</span>
                      <span className="status-value">{deviceInfo && deviceInfo.ledgerStatusStr}</span>
                    </div>
                  </div>
                </div>
                <div className="mess">
                  <div className="mes-item">
                    <span>设备类型</span>
                    <span>{deviceInfo && deviceInfo.deviceTypeName}</span>
                  </div>
                  <div className="mes-item">
                    <span>设备编号</span>
                    <span>{deviceInfo && deviceInfo.deviceNo}</span>
                  </div>
                  <br />
                  <div className="mes-item" style={{marginTop: '10px'}}>
                    <span>使用部门</span>
                    <span>{deviceInfo && deviceInfo.groupName}</span>
                  </div>
                  <div className="mes-item" style={{marginTop: '10px'}}>
                    <span>责任人</span>
                    <span>{deviceInfo && deviceInfo.chargePerson}</span>
                  </div>
                </div>
              </div>
            </div>
          )
      }

    </div>
  );
}

export default Form.create()(DeviceMessage)
